<template>
  <div>

    <!-- <el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400" next-text="下一页" >
    </el-pagination> -->

    <span class="total"  v-show="layout.includes('total')"> 共{{ total }}条 </span>
    
    <select v-show="layout.includes('sizes')">
      <option v-for="(item, index) in pageSizes" :key="index" :value="item">{{ `${item}条每页` }}</option>
    </select>

    <span v-show="layout.includes('prev')" >{{ prevText }}</span>
    <span  v-for="(item, index) in pages" :key="index">
      <a href="javascript:void(0)" target="_blank" >   {{ item }}   </a>   
    </span>
    <span v-show="layout.includes('next')" >{{ nextText }}</span>
    <span v-show="layout.includes('jumper')" >前往 <input class="jumper" type="text" :value="currentPage">页</span>
    


  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
// 返回类似reactive 定义的变
// 数字number,string,boolean,symbol,object,array
let props = defineProps({
  // 限制2个 类型,任选其一
  layout: String,
  ["current-page"]: Number,
  ["page-sizes"]: Array,
  ["page-size"]: {
    // 默认值
    default: "100"
  },
  // 写成对象,
  total: {
    // 指定类型
    type: Number,
    // 必填项
    required: true,
  },
  ["next-text"]: {
    // 默认值
    default: ">"
  },
  ["prev-text"]: {
    // 默认值
    default: "<"
  }
})
const pages = computed(() => Math.ceil(props.total / props.pageSize))
</script>

<style  scoped>

a{text-decoration: none;color: #333;}
span {
  margin-right:10px;
  padding: 10px;
  color: #666;
}
select{

  margin-right:10px;
  padding: 5px 10px;
  outline: none;
  transition: all 0.8s ;
  border-radius: 3px;
}
select:hover{
 border: 1px solid blue;
 border-radius: 3px;
}
.jumper{
  width:30px ;
  height:20px;
  text-align: center;
}
</style>